<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen flex items-center justify-center bg-[#1E2128]">
    <div class="w-[480px] p-12 rounded-lg bg-[#282C34] shadow-2xl">
      <!-- Logo区域 -->
      <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-white">蓝蚁智控</h1>
        <p class="text-gray-400 mt-2">专业的企业级AI数字人口播IP解决方案</p>
      </div>

      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="space-y-6">
        <!-- 用户名输入框 -->
        <div class="relative">
          <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
            <i class="fas fa-user text-gray-400"></i>
          </div>
          <input
              v-model="username"
              type="text"
              class="w-full pl-10 pr-4 py-3 bg-[#1E2128] text-white border border-gray-600 rounded-lg focus:border-[#2468F2] focus:outline-none transition-colors"
              :class="{'border-red-500': errors.username}"
              placeholder="请输入用户名"
          >
          <p v-if="errors.username" class="mt-1 text-red-500 text-sm">{{ errors.username }}</p>
        </div>

        <!-- 密码输入框 -->
        <div class="relative">
          <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
            <i class="fas fa-lock text-gray-400"></i>
          </div>
          <input
              v-model="password"
              :type="showPassword ? 'text' : 'password'"
              class="w-full pl-10 pr-12 py-3 bg-[#1E2128] text-white border border-gray-600 rounded-lg focus:border-[#2468F2] focus:outline-none transition-colors"
              :class="{'border-red-500': errors.password}"
              placeholder="请输入密码"
          >
          <button
              type="button"
              @click="togglePassword"
              class="absolute inset-y-0 right-3 flex items-center !rounded-button"
          >
            <i :class="['text-gray-400', showPassword ? 'fas fa-eye-slash' : 'fas fa-eye']"></i>
          </button>
          <p v-if="errors.password" class="mt-1 text-red-500 text-sm">{{ errors.password }}</p>
        </div>
        <div class="flex items-center space-x-4">
          <div class="flex-1">
            <input v-model="captcha" type="text" class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-700 bg-[#1E2128] bg-opacity-50 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="验证码" />

          </div>
          <div class="w-32 h-10 bg-gray-700 rounded flex items-center justify-center cursor-pointer" @click="refreshCaptcha">
            <img :src="captchaImage" alt="captcha" class="w-full h-full"/>
            <!--              <span class="text-white font-mono text-lg">{{ captchaText }}</span>-->
          </div>

        </div>

        <!-- 记住密码和忘记密码 -->
<!--        <div class="flex items-center justify-between">-->
<!--          <label class="flex items-center text-sm text-gray-400 cursor-pointer">-->
<!--            <input-->
<!--                type="checkbox"-->
<!--                v-model="rememberMe"-->
<!--                class="w-4 h-4 mr-2 bg-[#1E2128] border border-gray-600 rounded focus:ring-[#2468F2]"-->
<!--            >-->
<!--            记住密码-->
<!--          </label>-->
<!--          <a href="#" class="text-sm text-[#2468F2] hover:text-[#4785ff] transition-colors">忘记密码？</a>-->
<!--        </div>-->

        <!-- 登录按钮 -->
        <button
            type="submit"
            class="w-full py-3 bg-[#2468F2] hover:bg-[#4785ff] text-white font-medium transition-colors !rounded-button whitespace-nowrap flex items-center justify-center"
            :disabled="loading"
        >
          <i v-if="loading" class="fas fa-circle-notch fa-spin mr-2"></i>
          {{ loading ? '登录中...' : '登 录' }}
        </button>
      </form>
      <div class="pt-6  border-gray-700 text-center">
        <label for="agreement" class="ml-2 block text-sm text-gray-400">
          登录即代表您同意
          <a href="/yhxy" target="_blank" class="text-blue-500 hover:text-blue-400">用户协议</a>
          和
          <a href="/ystk" class="text-blue-500 hover:text-blue-400">隐私政策</a>
        </label>
      </div>
      <!-- 其他登录方式 -->
      <div class="mt-8 pt-6 border-t border-gray-700 text-center">
        <p class="text-gray-400 text-sm">
          还没有账号？
          <a href="#" @click="router.push('/register')"  class="text-[#2468F2] hover:text-[#4785ff]">立即注册</a>
        </p>
      </div>


<!--     -->
<!--      <div class="mt-8 text-center">-->
<!--        <p class="text-gray-400 text-sm mb-4">其他登录方式</p>-->
<!--        <div class="flex justify-center space-x-6">-->
<!--          <button class="text-gray-400 hover:text-white transition-colors !rounded-button whitespace-nowrap">-->
<!--            <i class="fab fa-weixin text-2xl"></i>-->
<!--          </button>-->
<!--          <button class="text-gray-400 hover:text-white transition-colors !rounded-button whitespace-nowrap">-->
<!--            <i class="fab fa-qq text-2xl"></i>-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script  setup>
document.documentElement.setAttribute('theme-mode', 'dark');
import { ref } from 'vue';
import {get, post} from "@/utils/api";
import config from "@/config";
import {MessagePlugin} from "tdesign-vue-next";
import router from '@/router'

const uniqid = ref('');
const captcha = ref('')
const captchaImage = ref('');
const getCaptcha = () => {
  //获取验证码
  get(config.captcha).then(res=>{
    console.log("captcha",res.data.data)
    captchaImage.value = res.data.data.image;
    uniqid.value = res.data.data.uniqid;
  })
};
getCaptcha()

function refreshCaptcha() {
  getCaptcha()
}

const username = ref('');
const password = ref('');
const showPassword = ref(false);
const rememberMe = ref(false);
const loading = ref(false);
const errors = ref({
  username: '',
  password: ''
});


const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const validateForm = () => {
  let isValid = true;
  errors.value.username = '';
  errors.value.password = '';

  if (!username.value) {
    errors.value.username = '请输入用户名';
    isValid = false;
  }

  if (!password.value) {
    errors.value.password = '请输入密码';
    isValid = false;
  } else if (password.value.length < 6) {
   // errors.value.password = '密码长度不能少于6位';
    //isValid = false;
  }

  return isValid;
};

const handleLogin = async () => {
  if (!validateForm()) return;

  loading.value = true;
  try {
    // 模拟登录请求
    const response = await post(config.loginUrl,{
      username:username.value,
      password:password.value,
      captcha:captcha.value,
      uniqid:uniqid.value
    }); // Adjust API endpoint as needed
    if (response.status === 200) {
      const data = response.data;
      if (data.code === 1) {
        MessagePlugin.success(data.info);
        localStorage.setItem('username', data.data.nickname)
        localStorage.setItem('api_config_type', data.data.api_config_type);
        localStorage.setItem('authToken', data.data.token); // Save token
        router.push("/dataShow");
      }else{
        getCaptcha()
        MessagePlugin.error(data.info);
      }
    } else {
      getCaptcha()
      MessagePlugin.error('Failed to fetch feedback data');
    }
    // 这里添加实际的登录逻辑
  } catch (error) {
    getCaptcha()
    MessagePlugin.error('登录失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 移除number类型input的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义checkbox样式 */
input[type="checkbox"] {
  accent-color: #2468F2;
}
</style>

